<template>
    <div class="header" >
       <div class="header-back">
         <span class="iconfont">&#xe641;</span>
       </div>
       <div class="header-search">
         <input type="text" placeholder="请输入您想去的地方">
       </div>
       <router-link to="/Location">
          <div class="header-city">{{this.city}}</div>
       </router-link>
    </div>
</template>

<script>
  import BMap from 'BMap'
    export default {
        data(){
          return{
            city:''
          }
        },
        name: "homeHeader",
      mounted(){
        let map = new BMap.Map('allmap');
        let myCity = new BMap.LocalCity();
        myCity.get((res)=>{
          if(res){
            this.city = res.name
          }else{
            this.city = '北京'
          }
        })
      }

    }
</script>

<style lang="stylus" scoped>

   .header
     line-height :0.9rem
     background : #6fcdbb
     text-align center
     display flex
    .header-back
      float :left
      width :0.9rem
    .header-search
      flex :1
      input
        width :60%
        border-radius:0.2rem
        padding :0.08rem 0.2rem
        line-height :0.5rem
        height :0.5rem
        overflow:hidden
        margin-bottom :0.05rem

    .header-city
      float :right
      color :#fff
      width :1.4rem
</style>
